

<!DOCTYPE html>
<html>
<head>
	<title>bootstrap-font-icons</title>
	 <meta charset="utf-8"> 
    <title>Bootstrap 实例 CSS 栅格</title>
    <link rel="stylesheet" href="script/bootstrap-3.3.7.min.css">
    <script src="script/jquery-1.10.min.js"></script>
    <script src="script/bootstrap-3.3.7.min.js"></script>

    <!-- 移动设备支持/ -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<div class="container">
	<div class="row">
		<!-- https://v3.bootcss.com/components/#glyphicons -->
		<div class="col-md-4 col-md-offset-2">
		<div> <!--字体 icon 不要直接放在div下  放在span下-->
			<span style="font-size: 140px;color: yellow" class="glyphicon glyphicon-cloud"></span>	
		</div>
		</div>
	</div>

	<div class="row">
		<div class="col-md-4 col-md-offset-2">
			<div class="alert alert-danger" role="alert">
			<!-- aria-hidden="true" 阅读器 对些图标隐藏 -->
			  <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>

  			<!-- sr-only 使用阅读器显示此部分 -->
			  <span class="sr-only">Error:</span>
			  Enter a valid email address
			</div>

		</div>

	</div>


	<div class="row">
		<div class="col-md-6 col-md-offset-1">
<!-- 输入框组大小 -->
			<div class="input-group input-group-lg">  
			  <span class="input-group-addon">@</span>
			  <input type="text" class="form-control" placeholder="Username">
			</div>

			<div class="input-group input-group-sm">
			  <input type="text" class="form-control" placeholder="Recipient's username">
			  <span class="input-group-addon" >@example.com</span>
			</div>

			<div class="input-group input-group-sm">
			  <span class="input-group-addon">$</span>
			  <input type="text" class="form-control">
			  <span class="input-group-addon">.00</span>
			</div>

			<label for="basic-url">Your vanity URL</label>
			<div class="input-group input-group-sm">
			  <span class="input-group-addon">https://example.com/users/</span>
			  <input type="text" class="form-control" id="basic-url">
			</div>



		</div>
	</div>

</div>
</body>
</html>